<template>
  <div class="main">

    <el-card>
      <div slot="header" class="clearfix">
            <span style="font-size:22px">
              <el-descriptions title="项目成员信息">

                <el-descriptions-item label="项目成员">{{ peopleTotal }}人</el-descriptions-item>
                <el-descriptions-item
                  v-for="(item, index) in peopleTotalInfo"
                  :key="index"
                  :label="item.postName"
                >{{ item.value }}人</el-descriptions-item>
              </el-descriptions>
            </span>

      </div>
      <div class="text item">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              fixed
              type="index"
              prop="date"
              label="序号"
              width="150"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="avatar"
              label="头像"
              width="120"
              align="center">
              <template slot-scope="scope">
                <div class="userImg">
                  <div class="demo-image">
                    <div v-if="scope.row.avatar != ''" class="block">
                      <el-image :src="scope.row.avatar"></el-image>
                    </div>
                    <div v-else class="block">
                      <el-avatar :size="medium" shape="circle" :src="require('../../../../assets/images/OAK_defalutImg.gif')">
                      </el-avatar>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="姓名" align="center">
              <template slot-scope="scope">
                <div class="">
                  <p>{{ scope.row.nickName }}</p>
                  <p>{{ scope.row.email }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="postName" label="职位" align="center">
              <template slot-scope="scope">
                <div class="">
                  <el-tag>{{ scope.row.postName }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="postName" label="加入时间" align="center">
              <template slot-scope="scope">
                <div class="">
                  <p>{{ scope.row.joinTime }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="postName" label="投入" align="center">
              <template slot-scope="scope">
                <div class="">
                  <p>100（人天）</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120"
              align="center"
            >

            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-card>
    <addForm ref="addPeopleForm"></addForm>
  </div>

</template>


<script>

import { updaProjectStatus } from "@/api/system/project";
import { removeProjectUser } from "@/api/system/projectSettings";
import {projectDetail, userList, updateHour} from "@/api/system/projectSettings";
import addForm from "./addPeopleForm";

export default {
  components: {
    addForm
  },
  data() {
    return {
      pjFullName: "----",
      projectId:0,
      projectProfile:{},
      tableData: [],
      peopleTotal: "",
      peopleInfo: [],
      peopleTotalInfo: [],
    };
  },
  created() {
    this.projectId = this.$route.query.projectId;
    console.log(this.projectId);
    this.init();
  },
  methods: {
    init() {
      if (this.projectId == 0 || undefined) {
        this.$message.warning("请先选择项目");
      } else {
        // projectDetail(this.projectId).then(res => {
        //   console.log(res);
        //   this.projectProfile = res.data;
        // });

        userList(this.projectId).then(res => {
          console.log(res);
          this.tableData = res.data;
          this.tableData.forEach(el => {
            if (el.avatar != "") {
              el.avatar = "http://192.168.1.21:8080" + el.avatar;
            }
          });
          // console.log(this.tableData)
          this.peopleTotal = this.tableData.length;
          this.peopleInfo = this.tableData;
          this.peopleTotalInfo = [];
          this.peopleInfo.forEach(el => {
            let data = { postName: el.postName, value: 0 };
            this.peopleInfo.forEach(elt => {
              if (el.postName == elt.postName) {
                data.value += 1;
              }
            });
            this.peopleTotalInfo.push(data);
          });
          console.log(this.peopleTotalInfo);
          this.peopleTotalInfo = this.unique(this.peopleTotalInfo);
          console.log(this.peopleTotalInfo);
        });

      }

    },



    deleteRow(index, rows, row) {
      rows.splice(index, 1);
      console.log(index, rows, row);
      let userIds = [];
      userIds = row.userId;
      let data = {
        projectId: this.projectId,
        userIds
      };
      removeProjectUser(data).then(res => {
        console.log(res);
      });
    },
    addpeople() {
      // this.$refs.addPeopleForm.centerDialogVisible=true
      this.$refs.addPeopleForm.open();
      this.$refs.addPeopleForm.projectId = this.projectId;
    },

    unique(newarr) {
      let arr = newarr;
      let result = {};
      let finalResult = [];
      for (let i = 0; i < arr.length; i++) {
        //利用对象的键名无法重复的特点，cppostName是唯一区别的属性值
        result[arr[i].postName]
          ? ""
          : (result[arr[i].postName] = true && finalResult.push(arr[i]));
      }
      return finalResult;
    },
    editprojectdetail() {
      this.$refs.editForm.formdata = this.projectProfile;
      this.$refs.editForm.open();
    },
    handlearchive(state) {
      console.log(state);
      updaProjectStatus(this.projectId, state).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.init();
        }
      });
    },
    eaitManHour() {
      this.dialogVisible = true;
    },
    cancel() {
      this.dialogVisible = false;
      this.resetForm("numberValidateForm");
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.resetForm("numberValidateForm");
          done();
        })
        .catch(_ => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          // console.log(this.hourUnit)
          this.manHour = this.numberValidateForm.manHou;
          let data = {
            manHour: this.numberValidateForm.manHour,
            projectId: this.projectId
          };
          if (this.hourUnit == 0) {
            data.manHour = data.manHour * 8;
          } else if (this.hourUnit == 1) {
            data.manHour = data.manHour * 8 * 22;
          }
          console.log(data);
          updateHour(data).then(res => {
            console.log(res);
            if (res.code == 200) {
              // this.manHour = this.numberValidateForm.manHou;
              this.init();
              this.showCard = 3;
            }
          });
          this.resetForm(formName);
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          this.resetForm(formName);
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  }

};
</script>

<style scoped lang="scss">

.myprocard {
  // padding: 0 20px;
  display: flex;
  // justify-content: space-between !important;
  align-items: center;
  flex-wrap: wrap;
}
.box-card {
  width: 100%;
  ::v-deep .el-card__body {
    padding: 10px;
  }
  .card-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .left {
      width: 55%;
    }
    .header-left {
      font-size: 16px;
      font-weight: 800;
    }
    .right {
      width: 45%;
      .top {
        text-align: center;
      }
      .bottom {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .card-footer {
    font-size: 8px;
    .projectpeople {
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
    }
  }
}
</style>
